import { Routes,Route } from "react-router-dom"
import React,{lazy,Suspense} from "react"
import routes from "./router"
import 'lib-flexible/flexible'
import './App.css'
import TabBar from "./container/tabBar/tabbar"
// 使用lazy函数来定义懒加载组件
const HomePage = lazy(() => import('./container/my'));

 
function App() {
  return<>
  <Suspense fallback={<div>Loading...</div>}>
    <Routes>
    
      {/* 其中有三个属性必须得写 key path  element*/}
        {routes.map(route=><Route key={route.path} path={route.path} element={<route.component/>}></Route>)}
        
    </Routes>
    </Suspense>
    <TabBar/>
  </>
}

export default App
// import { useRef, useState } from "react";

// function AppIni() {
//   const ref: any = useRef<any>(null);
//   const [data, setData] = useState<string>('');

//   function fetchData(value: string) {
//     // 取消上一次未完成的请求
//     if (ref.current) {
//       ref.current.abort();
//     }

//     // 创建新的 AbortController
//     ref.current = new AbortController();
//     return fetch(`http://127.0.0.1:7001/api/d?q=${value}`, {
//       signal: ref.current.signal,
//     })
//       .then((response) => {
//     // response是一个Response对象，Response 对象的 body 部分是一个 ReadableStream 对象，它并不是直接以 JSON 格式提供的
//     // 您会使用 response.json() 方法。这个方法会返回一个 Promise，该 Promise 解析为从响应体中解析出来的 JavaScript 对象
//         console.log(Object.prototype.toString.call( response),'--response');
//         return response.json();
//       })
//       .then((data) => {
//         // 处理请求成功的数据
//         ref.current = null
//         setData(data.value.q);
//         console.log(data, "data");
//       });
//   }

//   return (
//     <>
//       <input
//         placeholder="输入"
//         onChange={(e) => {
//           fetchData(e.target.value);
//         }}
//       ></input>
//       <button>搜索</button>
//       <div>{new Array(40).fill(data).map(item => <div>{item} </div>)}</div>
//     </>
//   );
// }
// export default AppIni;